import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { NavBar, Button, Form, Field, Row, Col, Badge, Search, Divider, List, Tag, CellGroup, Dialog, Image as VanImage } from 'vant'

// 引入amfe-flexible用来适配不同移动端窗口的字体大小
// 安装并配置postcss与postcss-pxtorem将px转换为rem单位并配置文件
import 'amfe-flexible'

Vue.use(VanImage)

// 全局注册
Vue.use(Dialog)
Vue.use(CellGroup)
Vue.use(Tag)

Vue.use(List)
const directiveObj = {
  install () {
    Vue.directive('fofo', {
      inserted (el) {
        if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
          // 如果直接是input标签/textarea标签
          el.focus()
        } else {
          // 指令在van-search组件身上, 获取的是组件根标签div, 而input在标签内
          const inp = el.querySelector('input')
          const textArea = el.querySelector('textarea')
          // 如果找到了
          if (inp || textArea) {
            inp && inp.focus()
            textArea && textArea.focus()
          } else {
            // 本身也不是, 子标签里也没有
            console.error('请把v-fofo用在输入框标签上')
          }
        }
      }
    })
  }
}
Vue.use(directiveObj)
Vue.use(Divider)
Vue.use(Search)
Vue.use(Button)
Vue.use(Form)
Vue.use(Field)
Vue.use(Row)
Vue.use(Col)
Vue.use(Badge)
Vue.use(NavBar)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
